<template>
  <div class="pages tradingFlow-info">
    <div class="tableSearch">
      <el-button type="primary" style="margin-left: 32px;" size="mini" @click="goBack()">返回</el-button>
    </div>
    <div class="content">
      <div class="center">
        <ul class="content-ul">
          <li>
            单&nbsp; &nbsp;号:
            <span>{{payOrderNo}}</span>
          </li>
          <li>
            日&nbsp; &nbsp;期:
            <span>{{record.createTime}}</span>
          </li>
          <li>
            收银员:
            <span>{{record.sellerName}}</span>
          </li>
        </ul>
        <ul class="content-ul">
          <li>
            会员手机:
            <span>{{record.memberPhone}}</span>
          </li>
          <li>
            收银机号:
            <span>{{record.posCode}}</span>
          </li>
          <li v-if='this.Type==2' class="left-li">
            原销售单号:
            <span>{{SaleOrderNo}}</span>
          </li>
        </ul>
      </div>
      <div class="from_main infon">
        <div class="infon_text">
          <span class="infon_shu"></span>
          <span class="infon_text_t">商品信息</span>
        </div>
        <div v-if="servicetime" class="service">
          服务时间： {{record.appointmentTime}}
          <span></span>
        </div>
        <el-table v-if="wares" :data="tableDataGoods" border style="width: 100%">
          <el-table-column prop="goodsCode" label="商品条码号" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="parameter" label="规格型号" align="center">
            <template slot-scope="scope">
              <div v-for="(item, index) in  scope.row.specs" :key="index">
                <span>{{item.paramName}} :</span>
                <span>{{item.paramValue}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="classifyName" label="所属分类" align="center"></el-table-column>
          <el-table-column prop="price" label="单价" align="center"></el-table-column>
          <el-table-column prop="goodsNum" label="数量" align="center">
            <template slot-scope="scope">
              <div>
                <span v-if="Type!='2'">{{scope.row.goodsNum}}</span>
                <span v-if="Type=='2'">{{scope.row.returnNum}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="unitName" label="单位" align="center"></el-table-column>
          <el-table-column prop="goodsTotal" label="金额" align="center">
            <template slot-scope="scope">
              <div>
                <span v-if="Type!='2'">{{scope.row.goodsTotal}}</span>
                <span v-if="Type=='2'">{{scope.row.goodsPriceCount}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="consignNum" label="寄存数量" align="center"></el-table-column>
          <el-table-column prop="presentNum" label="赠送数量" align="center"></el-table-column>
          <el-table-column prop="isReturn" label="是否退货" align="center">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.isReturn==0">否 </span>
                <span v-if="scope.row.isReturn==1">是</span>
                <span></span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="service" :data="tableDataServe" border style="width: 100%">
          <el-table-column prop="serviceName" label="服务名称" align="center"></el-table-column>
          <el-table-column prop="serviceLength" label="服务时长" align="center"></el-table-column>
          <el-table-column prop="technicianName" label="技师" align="center"></el-table-column>
          <el-table-column prop="price" label="单价" align="center"></el-table-column>
          <el-table-column prop="goodsNum" label="数量" align="center"></el-table-column>
          <el-table-column prop="priceSum" label="金额" align="center"></el-table-column>
        </el-table>
        <el-table v-if="card" :data="tableDataCard" border style="width: 100%">
          <el-table-column prop="cardCode" label="编号" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="次卡名称" align="center"></el-table-column>
          <el-table-column prop="cardServiceName" label="适用服务" align="center"></el-table-column>
          <el-table-column prop="cardTimes" label="次数" align="center"></el-table-column>
          <el-table-column prop="price" label="单价" align="center"></el-table-column>
          <el-table-column prop="goodsNum" label="数量" align="center"></el-table-column>
          <el-table-column prop="goodsTotal" label="金额" align="center"></el-table-column>
        </el-table>
        <div class="content-sum">
          <div>
            合计金额：
            <span>￥{{record.payMoney}}</span>
          </div>
        </div>
        <div class="infon_text">
          <span class="infon_shu"></span>
          <span class="infon_text_t">结算信息</span>
        </div>
        <ul class="infon_text-ul">
          <!-- <li class="li-font li-red">
            商品合计（应收金额）:
            <span>￥{{record.payMoney}}</span>
          </li> -->
          <li class="li-font li-red" v-if="record.memberDiscount!='0.00'">
            会员优惠:
            <span>￥{{record.memberDiscount}}</span>
          </li>
          <li class="li-font li-red" v-if="record.mlPrice!=0">
            抹零:
            <span>￥{{record.mlPrice}}</span>
          </li>
          <li class="li-font li-red" v-if="record.presentDiscount!=0">
            赠送优惠:
            <span>￥{{record.presentDiscount}}</span>
          </li>
          <li class="li-font li-red" v-if="record.bargainingAmount!=0">
            议价扣减:
            <span>￥{{record.bargainingAmount}}</span>
          </li>
          <li class="li-font li-red" v-if="Subcard">
            次卡:
            <span>￥{{Subcard}}</span>
          </li>
          <li class="li-font li-red" v-if="record.ticketAmount!=0">
            优惠券:
            <span>￥{{record.ticketAmount}}</span>
          </li>
          <li class="li-font li-red" v-if="record.experienceAmount">
            体验券:
            <span>￥{{record.experienceAmount}}</span>
          </li>
          <li class="li-font li-red" v-if="record.rebateAmount">
            折扣券:
            <span>￥{{record.rebateAmount}}</span>
          </li>
          <li class="li-font li-red" v-if="balance">
            会员余额支付:
            <span>￥{{balance}}</span>
          </li>
          <li class="li-font li-red" v-if="WeChat">
            微信支付:
            <span>￥{{WeChat}}</span>
          </li>
          <li class="li-font li-red" v-if="Alipay">
            支付宝支付:
            <span>￥{{Alipay}}</span>
          </li>
          <li class="li-font li-red" v-if="cash">
            现金支付:
            <span>￥{{cash}}</span>
          </li>
          <li class="li-font li-red" v-if="bankCard">
            银行卡支付:
            <span>￥{{bankCard}}</span>
          </li>
          <li class="li-font li-red" v-if="SDcoin">
            圣旦币:
            <span>￥{{SDcoin}}</span>
          </li>
        </ul>
        <ul class='infon_text-ulli'>
          <li class="li-font li-red" v-if='this.Type!=2'>
            实收金额：
            <span>￥{{record.realPayAmount}}</span>
          </li>
          <li class="li-font li-red" v-if='this.Type==2'>
            应退金额：
            <span>￥{{record.shouldReturnMoney}}</span>
          </li>
          <li class="li-font li-red" v-if='this.Type==2'>
            实退金额：
            <span>￥{{record.returnMoney}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import util from "@/util";
import { detail } from "@/api";
export default {
  computed: mapState(["merchantId"]),
  data() {
    return {
      SDcoin: "",
      SaleOrderNo: "",
      Subcard: "",
      balance: "",
      WeChat: "",
      Alipay: "",
      cash: "",
      bankCard: "",
      Type: "",
      payOrderNo: "",
      record: {}, //数据
      wares: false, //----------商品列表
      tableDataGoods: [], //商品列表
      service: false, //--------服务列表
      tableDataServe: [], //服务列表
      card: false, //-----------计次卡l列表
      tableDataCard: [], //几次列表
      member: false, //---------会员顾问
      servicetime: false, //---------服务时间
      billsmsg: [] //---------支付方式
    };
  },
  created() {
    let type = util.getQuery("orderType");
    this.payOrderNo = util.getQuery("payOrderNo");
    this.Type = util.getQuery("type");
    this.SaleOrderNo = util.getQuery("id");
    if (type == "1") {
      this.wares = true;
      this.member = true;
      this.servicetime = false;
    } else if (type == "2") {
      this.service = true;
      this.servicetime = true;
    } else if (type == "3") {
      this.card = true;
      this.servicetime = false;
    }
    this.salesDetail();
  },
  mounted() {},
  methods: {
    tradeTime: function(row) {
      return util.foryear(row) + " " + util.fortime(row);
    },
    transform(Type) {
      if (Type) {
        return parseFloat(Type).toFixed(2);
      }
    },
    undef(text) {
      if (text == undefined) {
        return 0;
      } else {
        return text;
      }
    },
    // 查看详情
    salesDetail() {
      let type = util.getQuery("orderType");
      let orderType = 1;
      if (util.getQuery("orderType") == "2") {
        orderType = 0;
      }
      detail({
        orderCode: util.getQuery("id"),
        orderType: orderType
      }).then(res => {
        this.record = res.data;
        this.billsmsg = this.record.priceList;
        if (this.record.receivableAmount) {
          this.record.payMoney = this.record.receivableAmount.toFixed(2);
        }
        this.record.payType = JSON.parse(this.record.payType);
        this.balance = this.transform(this.record.payType[4]);
        this.WeChat = this.transform(this.record.payType[0]);
        this.Alipay = this.transform(this.record.payType[1]);
        this.cash = this.transform(this.record.payType[3]);
        this.bankCard = this.transform(this.record.payType[2]);
        this.Subcard = this.transform(this.record.payType[5]);
        this.SDcoin = this.transform(this.record.payType[6]);
        // console.log(this.record.presentDiscount);
        // console.log(JSON.parse(this.record.payType));
        this.record.createTime = this.tradeTime(this.record.createTime);
        this.record.ticketAmount = this.undef(this.record.ticketAmount);
        this.record.presentDiscount = this.undef(this.record.presentDiscount);
        if (type == "1") {
          if (this.Type == "2") {
            this.record.payMoney = this.record.goodsPriceSum.toFixed(2);
          }
          this.tableDataGoods = this.record.goodsList; //次卡数据详情
          for (let i = 0; i < this.tableDataGoods.length; i++) {
            if (this.tableDataGoods[i].goodsSpec) {
              this.tableDataGoods[i].goodsSpec = JSON.parse(
                this.tableDataGoods[i].goodsSpec
              );
            }
          }
        } else if (type == "2") {
          this.tableDataServe = res.data.list; //服务数据详情
          // console.log(this.tableDataServe);
          this.record.posCode = this.record.equipment;
          this.record.appointmentTime = this.tradeTime(
            this.record.appointmentTime
          );
        } else if (type == "3") {
          this.tableDataCard = this.record.goodsList; //次卡数据详情
        }
      });
    },
    // 返回按钮
    goBack() {
      history.back();
    }
  }
};
</script>
<style>
.center {
  width: 1100px;
  height: 130px;
  margin-top: 30px;
}
.content-ul {
  float: left;
  width: 500px;
  height: 100px;
  margin-left: 32px;
}
.content-ul li {
  font-size: 14px;
  width: 100%;
  height: 40px;
}
.content-ul li span {
  margin-left: 24px;
}
.content-sum {
  margin-top: 10px;
  margin-right: 20px;
  height: 30px;
  position: relative;
}
.content-sum div {
  width: 200px;
  color: #444;
  position: absolute;
  top: 10px;
  right: 30px;
}
.content-sum div span {
  color: #f82828;
}
.service {
  line-height: 70px;
  font-size: 14px;
  margin-left: 30px;
  color: #666;
}
.infon_text-ul {
  margin-left: 85px;
  width: 1000px;
  margin-bottom: 20px;
}
.infon_text-ul li {
  width: 100%;
  line-height: 44px;
  font-size: 16px;
  color: #6b6b6b;
  text-indent: 20px;
  position: relative;
  font-weight: bolder;
}
.infon_text-ul .lines {
  border-bottom: 1px dashed #ccc;
}
.infon_text-ul li span {
  position: absolute;
  right: 25px;
}
.infon_text-ul .li-font {
  font-weight: normal;
}
.infon_text-ul .li-red span {
  color: red;
}
.infon_text-ulli {
  margin-left: 85px;
  width: 1000px;
  margin-bottom: 40px;
}
.infon_text-ulli li {
  margin-left: 870px;
  width: 300px;
  line-height: 44px;
  font-size: 16px;
  color: #6b6b6b;
  text-indent: 20px;
  position: relative;
  font-weight: bolder;
}
.infon_text-ulli .li-red span {
  color: red;
}
.content-ul .left-li {
  margin-left: -13px;
}
</style>

